<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">卡片</block></cu-custom>
		
		<!-- <cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true">
			<view></view>
			<block slot="backText">返回</block>
			<block slot="content">班次详情</block>
		</cu-custom> -->
		<view class="cu-card ">
			<view class="cu-item">
				<view class="grid col-3 text-center cu-card light bg-gradual-blue">
					<view class="flex flex-direction align-end ">
						<view class="margin-xs text-sl">16:00</view>
						<view class="flex margin-right-sm text-black text-xl">
							火车站
							<view class="cuIcon-safe margin-lr-sm text-l"></view>
						</view>
					</view>

					<view class="flex flex-direction shadow-blur align-center ">
						<view class="flex align-center justify-center margin-sm">
							<view class="cuIcon-global margin-xs"></view>
							<view class="solid-bottom text-bold">GH8003</view>
							<view class="cuIcon-send margin-xs line-green"></view>
						</view>
						<view class="cf">
							<view class="fl solid-right">准载45人</view>
							<view class="fr text-red solid-left">剩余45人</view>
						</view>
					</view>

					<view class="flex align-start flex-direction radius ">
						<view class="margin-xs text-sl text-black">19:00</view>
						<view class="flex margin-lr-sm text-black text-xl">
							<view class="cuIcon-safe margin-right-sm "></view>
							磨家
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex align-center justify-center text-bold text-cyan">
			<text class="cuIcon-female align-end flex line-orange"></text>
			------ 选座情况-------
			<text class="cuIcon-forward align-end flex line-orange"></text>
		</view>

		<view class="flex justify-center">
			<view class="padding-sm radius margin-xs text-center bg-blue">已占</view>
			<view class="padding-sm radius margin-xs text-center bg-gradual-green">已选</view>
			<view class="padding-sm radius margin-xs text-center bg-yellow">可选</view>
		</view>

		<view class="grid col-5 align-center justify-center text-center">
			<view class="padding-sm radius margin-xs text-center bg-blue" v-for="item in 44" :key="item" v-if="seatInfo[item + 1]">{{ item + 1 }}</view>

			<view class="padding-sm radius margin-xs bg-yellow" v-else="" :data-seatnum="item + 1" :class="seat[item + 1] ? 'bg-gradual-green' : ''" @click="chooseSeat">
				{{ item + 1 }}
			</view>
		</view>

		<button class="margin-sm padding bg-gradual-green radius" @click="upSeat">提交</button>
	</view>
</template>

<script>
	var _self;
export default {
	data() {
		return {
			cardata:{},
			carinfo:{},
			seatInfo:{},
			// car
			// seatInfo: {
			// 	'1': '陈云',
			// 	'2': 'chenyun',
			// 	'4': '司机1',
			// 	'45': '司机1'
			// },
			seat: [],
			choose: false,
			chooseNum: ''
		};
	},
	onLoad: function(e) {
		_self =this;
		console.log(e.num);
		var num = e.num;
		uni.request({
			url: 'http://caradmin.cn/car/index/getParticularTask',
			method: 'GET',
			data: {
				task_id :num
			},
			success: res => {
				_self.cardata = res.data.data;
				_self.seatInfo = res.data.data.seat_info;
				_self.carinfo =  res.data.data.carinfo;
				console.log(res);
			},
			fail: () => {},
			complete: () => {}
		});
		
		
		// var islogin = global.isLogin();
		// if (!islogin) {
		// 	uni.showModal({
		// 		title: '请登录',
		// 		content: '请登录',
		// 		success: function() {
		// 			uni.navigateTo({
		// 				url: '../login/login'
		// 			});
		// 		}
		// 	});
		// }
	},
	methods: {
		chooseSeat: function(e) {
			console.log(e);
			var seatnum = e.target.dataset.seatnum;

			if (this.chooseNum == e.target.dataset.seatnum) {
				this.seat[this.chooseNum] = false;

				uni.showToast({
					title: '取消:' + this.chooseNum,
					icon: 'error'
				});
				console.log('取消的是：' + this.chooseNum);
				this.chooseNum = null;
				this.choose = false;
				return;
			}
			if (!this.choose) {
				//第一次选
				// this.seatInfo[index] = '小哥哥';
				this.choose = true;
				this.seat[seatnum] = true;
				this.chooseNum = e.target.dataset.seatnum;
				console.log('选择的是：' + this.chooseNum);
				uni.showToast({
					title: '选择:' + seatnum,
					icon: 'error'
				});
			} else {
				uni.showToast({
					title: '只可一个座位哟',
					icon: 'error'
				});
			}
		},
		upSeat: function(e) {
			if (this.chooseNum == '') {
				uni.showToast({
					title: '你还没有选择座位哟',
					icon: 'error'
				});
			} else {
				console.log(this.chooseNum);
			}
		}
	}
};
</script>

<style></style>
